<!--
 * @Author: gao_m3
 * @Date: 2020-09-03 08:52:51
 * @LastEditors: zhong_m
 * @LastEditTime: 2022-04-12 15:00:14
 * @Descripttion: 
--> 
<template>
  <div class="drawer-container">
    <fks-row :gutter="16" type="flex" justify="center">
      <fks-col :xs="20" :sm="18" :md="18" :lg="12" :xl="12">
        <div class="title">
          <div class="fks-title-icon" />
          {{ LANG.REAL_TIME_PUSH }}
        </div>
        <div class="row-content-container">
          <div class="row-content">
            <span style="display: inline-block; width: 140px">
              {{ LANG.REAL_TIME_PUSH }}
              <fks-tooltip placement="top-start">
                <div
                  slot="content"
                  style="font-size: 14px; line-height: 20px"
                  class="tips-container"
                >
                  {{ LANG.REAL_TIP }}
                </div>
                <i class="fks-icon-question" />
              </fks-tooltip>
            </span>
            <fks-switch v-model="form.realTimePush" class="drawer-switch" />
          </div>
          <fks-divider />
          <div class="row-content">
            <span style="display: inline-block; width: 140px">
              {{ LANG.SOCKET_TYPE }}
              <fks-tooltip placement="top-start">
                <div
                  slot="content"
                  style="font-size: 14px; line-height: 20px"
                  class="tips-container"
                >
                  {{ LANG.SOCKET_TYPE_TIP }}
                </div>
                <i class="fks-icon-question" />
              </fks-tooltip>
            </span>

            <fks-select
              v-model="form.socketType"
              :placeholder="LANG.PLEASE_SELECT"
              style="width: 280px"
            >
              <fks-option
                v-for="{ label, value } in socketTypes"
                :key="value"
                :label="label"
                :value="value"
              />
            </fks-select>
          </div>
          <fks-divider />
          <div class="row-content">
            <span style="display: inline-block; width: 140px">{{
              LANG.MAX_RECONNECT
            }}</span>
            <div>
              <fks-input-number v-model="form.maxReconnect" :min="0" />
              <span style="margin-left: 20px">{{ LANG.TIMES }}</span>
            </div>
          </div>
          <fks-divider />
          <div class="row-content">
            <span style="display: inline-block; width: 140px">{{
              LANG.RECONNECT_INTERVAL
            }}</span>
            <div>
              <fks-input-number v-model="reconnectIntervalShow" :min="1" />
              <span :class="{ chinese: isChinese, english: !isChinese }">{{
                LANG.SECOND
              }}</span>
            </div>
          </div>
        </div>
      </fks-col>
    </fks-row>
    <fks-row :gutter="16" type="flex" justify="center">
      <fks-col :xs="20" :sm="18" :md="18" :lg="12" :xl="12">
        <div class="title">
          <div class="fks-title-icon" />
          {{ LANG.DATA_MODE }}
          <fks-tooltip placement="top-start">
            <div
              slot="content"
              style="font-size: 14px; line-height: 20px"
              class="tips-container"
            >
              {{ LANG.DATA_MODE_TIP }}
            </div>
            <i class="fks-icon-question" />
          </fks-tooltip>
        </div>
        <div class="row-content-container">
          <div class="row-content">
            <span style="display: inline-block; width: 140px">
              {{ LANG.USER_DATA }}
            </span>
            <fks-select
              v-model="dataMode.user"
              :placeholder="LANG.PLEASE_SELECT"
              style="width: 280px"
            >
              <fks-option
                v-for="{ label, value } in dataModeTypes"
                :key="value"
                :label="label"
                :value="value"
              />
            </fks-select>
          </div>
          <fks-divider />
          <div class="row-content">
            <span style="display: inline-block; width: 140px">{{
              LANG.ORG_DATA
            }}</span>

            <fks-select
              v-model="dataMode.org"
              :placeholder="LANG.PLEASE_SELECT"
              style="width: 280px"
            >
              <fks-option
                v-for="{ label, value } in dataModeTypes"
                :key="value"
                :label="label"
                :value="value"
              />
            </fks-select>
          </div>
          <fks-divider />
          <div class="row-content">
            <span style="display: inline-block; width: 140px">{{
              LANG.DIC_DATA
            }}</span>
            <fks-select
              v-model="dataMode.dictionary"
              :placeholder="LANG.PLEASE_SELECT"
              style="width: 280px"
            >
              <fks-option
                v-for="{ label, value } in dataModeTypes"
                :key="value"
                :label="label"
                :value="value"
              />
            </fks-select>
          </div>
        </div>
      </fks-col>
    </fks-row>
    <fks-row :gutter="16" type="flex" justify="center">
      <fks-col :xs="20" :sm="18" :md="18" :lg="12" :xl="12">
        <div class="title">
          <div class="fks-title-icon" />
          {{ LANG.ADDITIONAL_FEATURES }}
        </div>
        <div class="row-content-container">
          <div class="row-content">
            <span style="display: inline-block; width: 140px">{{
              LANG.HIERARCHICAL_AUTH
            }}</span>
            <fks-switch v-model="form.hierarchicalAuth" class="drawer-switch" />
          </div>
          <fks-divider />
          <div class="row-content">
            <span style="display: inline-block; width: 140px">{{
              LANG.OPEN_REGISTER
            }}</span>
            <fks-switch v-model="form.openRegister" class="drawer-switch" />
          </div>
          <fks-divider />
          <div class="row-content">
            <span style="display: inline-block; width: 140px">{{
              LANG.INTERNATIONALIZATION
            }}</span>
            <fks-switch v-model="form.i18n" class="drawer-switch" />
          </div>
          <fks-divider />
          <div class="row-content">
            <span style="display: inline-block; width: 140px">{{
              LANG.BEHAVIOR_ANALYSIS
            }}</span>
            <fks-switch v-model="form.behaviorAnalysis" class="drawer-switch" />
          </div>
        </div>
      </fks-col>
    </fks-row>
    <div style="margin-bottom: 36px; text-align: center">
      <fks-button
        v-permission="['advanced:refresh']"
        icon="fks-icon-turn-right"
        @click="init"
      >
        {{ LANG.REDUCTION }}
      </fks-button>
      <fks-button
        v-permission="['advanced:update']"
        type="primary"
        icon="fks-icon-check"
        :loading="loading"
        @click="submit"
      >
        {{ LANG.UPDATE }}
      </fks-button>
    </div>
  </div>
</template>

<script>
import Mix from '@/mixins/module'
import {
  LATEST_CLIENT_CONFIG,
  ADVANCED_CONFIG,
  DATA_MODE
} from '@/store/State/stateTypes'
import { SOCKET_TYPE, DATA_MODE_TYPE } from '@/config/enums'
import {
  GET_LATEST_CLIENT_CONFIG,
  PUT_CLIENT_CONFIG
} from '@/store/Action/actionTypes'
import { REAL_TIME_PUSH } from '@/store/Getter/getterTypes'
export default {
  name: 'Advanced',
  mixins: [Mix],
  data() {
    return {
      visible: false,
      loading: false,
      hasSubmitted: false,
      isChinese: true,
      socketTypes: [
        { label: 'SMQTT', value: SOCKET_TYPE.SMQTT },
        { label: 'STOMP', value: SOCKET_TYPE.STOMP }
      ],
      accessToken: this.$storage.get('access_token'),
      form: {
        realTimePush: false,
        socketType: SOCKET_TYPE.SMQTT,
        maxReconnect: 3,
        reconnectInterval: 180,
        hierarchicalAuth: false,
        openRegister: false,
        behaviorAnalysis: false,
        i18n: true
      },
      dataMode: {
        user: DATA_MODE_TYPE.MASTER,
        org: DATA_MODE_TYPE.TENANT,
        dictionary: DATA_MODE_TYPE.MASTER
      }
    }
  },
  computed: {
    // 配置备份
    latestClientConfig() {
      return this.$store.state[LATEST_CLIENT_CONFIG]
    },
    advancedConfig() {
      return this.$store.state[ADVANCED_CONFIG]
    },
    dataModeConfig() {
      return this.$store.state[DATA_MODE]
    },
    reconnectIntervalShow: {
      get() {
        return this.form.reconnectInterval / 1000
      },
      set(val) {
        this.form.reconnectInterval = val * 1000
      }
    },
    realTimePush() {
      return this.$store.getters[REAL_TIME_PUSH]
    },
    dataModeTypes() {
      return [
        { label: this.LANG.MASTER, value: DATA_MODE_TYPE.MASTER },
        { label: this.LANG.TENANT, value: DATA_MODE_TYPE.TENANT }
      ]
    }
  },
  watch: {
    advancedConfig: {
      handler(val) {
        this.form = { ...this.form, ...val }
      },
      immediate: true
    },
    dataModeConfig: {
      handler(val) {
        this.dataMode = { ...this.dataMode, ...val }
      },
      immediate: true
    },
    $lang(val) {
      if (val === 'en') {
        this.isChinese = false
      } else {
        this.isChinese = true
      }
    }
  },
  mounted() {
    this.$store.dispatch(GET_LATEST_CLIENT_CONFIG)
    if (this.$lang === 'en') {
      this.isChinese = false
    } else {
      this.isChinese = true
    }
  },
  methods: {
    //还原
    init() {
      this.form = { ...this.form, ...this.advancedConfig }
      this.dataMode = { ...this.dataMode, ...this.dataModeConfig }
      this.$message(this.LANG.REDUCTION_TIP)
    },
    /**
     * @description: 提交保存修改
     */
    submit() {
      this.loading = true
      let advancedConfig = this.form
      let additionalInfo = this.latestClientConfig.additionalInformation
      let settingsJSON = {
        ...this.latestClientConfig,
        additionalInformation: {
          ...additionalInfo,
          advancedConfig,
          dataMode: this.dataMode
        }
      }
      this.$store
        .dispatch(PUT_CLIENT_CONFIG, settingsJSON)
        .then((res) => {
          if (res.status) {
            this.loading = false
            this.$message({
              type: 'success',
              message: this.LANG.UPDATE_SUCCESS
            })
          }
        })
        .catch((err) => {
          this.loading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.fks-col {
  min-width: 440px;
}

::v-deep .fks-divider--horizontal {
  margin: 0;
}

::v-deep .fks-select {
  .fks-input__inner {
    border: none;
    background-color: rgba(239, 240, 245, 0.3);
  }
}
::v-deep .fks-input-number {
  span {
    background: #fff;
  }
}
::v-deep .fks-input__count-inner {
  background: rgba(239, 240, 245, 0.3) !important;
}

::v-deep .fks-switch {
  display: flex !important;
  justify-content: flex-end;
  margin-right: 6px;
}

.drawer-container {
  width: 100%;
  min-width: 720px;
  height: 100%;
  padding-top: 56px;
  overflow-x: hidden;
  overflow-y: auto;
  font-size: 14px;
  background-color: white !important;

  .switch-item,
  .site-title {
    margin-bottom: 8px;
    color: #555;
  }
  .title {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 16px;
    color: #191919;
  }

  .row-content-container {
    padding: 0 24px;
    margin: 24px 0 36px;
    border: 1px solid #eee;
    border-radius: 8px;

    .row-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      min-height: 64px;
      padding: 16px 0;
    }
    .chinese {
      margin-left: 20px;
    }
    .english {
      margin-left: 2px;
    }
  }

  .site-title {
    margin-top: 12px;
  }

  .site-logo {
    margin-top: 20px;
  }

  .drawer-switch {
    margin-left: 20px;
  }

  .drawer-input {
    width: 280px;
  }

  .drawer-inputx {
    width: 280px;
  }

  .fks-divider {
    background-color: #eee;
  }
}
</style>
